<template>
  <el-card class="box-card">
    <template #header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="出库单">
          <el-input v-model="formInline.deliveryNo" placeholder="请输入出库单" clearable />
        </el-form-item>
        <el-form-item label="客户" prop="customersSn">
          <selectCustomer v-model="formInline.customersSn" val="customersSn"></selectCustomer>
        </el-form-item>
        <el-form-item label="结算客户" prop="settlementCustomersSn">
          <selectCustomer v-model="formInline.settlementCustomersSn" val="customersSn"></selectCustomer>
        </el-form-item>
        <el-form-item label="运输车辆">
          <el-input v-model="formInline.deliveryTruck" placeholder="请输入运输车辆" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择状态" clearable>
            <el-option :label="item.name" :value="item.value" v-for="(item,index) in counter.deliveryStatus" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="init">重置</el-button>
        </el-form-item>
      </el-form>
    </template>

    <el-table :data="tableParams.rows">
      <el-table-column prop="date" label="出库单" align="center" width="150">
        <template #default="scope">
          <el-button type="primary" text @click="proxy.$utils.toLink(`/delivery/deliveryRecordDetails?id=${scope.row.id}`)">{{scope.row.deliveryNo}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="关联计划单" align="center" width="150">
        <template #default="scope">
          <el-button type="primary" text @click="proxy.$utils.toLink(`/delivery/deliveryPlanDetails?id=${scope.row.planId}`)">{{scope.row.planNo}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="状态" width="150" align="center">
        <template #default="scope">
          {{counter.idString_format("deliveryStatus",scope.row.status)}}
        </template>
      </el-table-column>
      <el-table-column prop="customersName" label="客户" />
      <el-table-column prop="settlementCustomersName" label="结算客户" />
      <el-table-column prop="deliveryAddress" label="收货地址" align="center" />
      <el-table-column prop="deliveryTruck" label="运输车辆" align="center" width="180">
        <template #default="scope">
          <div v-if="!scope.row.edit" @click="scope.row.edit=!scope.row.edit" class="flex alignItemsCenter justifyCenter">
            {{scope.row.deliveryTruck?scope.row.deliveryTruck:'-'}}
            <el-button type="primary" icon="Edit" circle style="margin-left:15px" />
          </div>
          <div v-else class="flex alignItemsCenter justifyCenter">
            <el-input v-model="scope.row.deliveryTruck" placeholder="请输入运输车辆牌照" clearable />
            <el-button type="primary" icon="Check" circle style="margin-left:15px" @click="save(scope.row,scope.$index)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" />
    </el-table>
    <Pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />
  </el-card>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let formInline = ref({
  deliveryTruck: "",
  deliveryNo: "",
  status: "",
  customersSn: "",
  settlementCustomersSn: "",
  pageSize: 10,
  pageNum: 1,
});
let tableParams = ref({});

//生命周期
onMounted(() => {
  search();
});

let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableParams.value = await proxy.$apis.deliveryRecordList(formInline.value);
  console.log("数组", tableParams.value.rows);
};
let init = () => {
  formInline.value = {
    deliveryTruck: "",
    deliveryNo: "",
    status: "",
    customersSn: "",
    settlementCustomersSn: "",
    pageSize: 10,
    pageNum: 1,
  };
  getInfo();
};
let save = async (row, index) => {
  await proxy.$apis.deliveryRecordPut({
    id: row.id,
    deliveryTruck: row.deliveryTruck,
  });
  proxy.$utils.showToast("修改成功");
  getInfo();
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
}
</style>
